<!DOCTYPE html>
<html>

<head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

<body>
    <button onclick="startTask()">Start Task</button>
    <div id="progress"></div>

    <script>
        function startTask() {
            $.ajax({
                url: '/start_task',
                method: 'POST',
                success: function (data) {
                    taskId = data.task_id;
                    checkProgress(taskId);
                }
            });
        }

        function checkProgress(taskId) {
            $.ajax({
                url: `/task_status/${taskId}`,
                method: 'GET',
                success: function (data) {
                    if (data.state === 'PROGRESS') {
                        $('#progress').html(`Progress: ${data.progress}%`);
                        setTimeout(() => checkProgress(taskId), 1000);
                    } else {
                        $('#progress').html(`Task ${data.state}: ${data.status}`);
                    }
                }
            });
        }
    </script>
</body>

</html>